<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model="text" @keyup.enter="add"/>
	</header>
</template>

<script>
	export default {
		data() {
			return {
				text: ''
			}
		},
		methods: {
			add () {
				if (this.text.trim){
				this.$emit('addFn',this.text)
				}else {
					return alert('请输入内容')
				}
				this.text = ''
			}
		},
		props: {
			arr: {
				type: Array,
				required: true
			}
		},
		computed: {
			isAll: {
				get() {
					return this.arr.every(item => item.isDone)
				},
				set(val) {
					this.$emit('isAll',val)
				}
			}
		}
	}
</script>
